<script setup>
import { onMounted, watch,ref } from "vue"
import { useRoute, useRouter } from "vue-router";
// import '../../assets/image/sztuinfo.png'
// import '../../assets/image/sztubuild.png'
// import '../../assets/image/sztuflower.png'

const props=defineProps({
  nowPage: {
    type: Number,
    required: true
  }
})
const route = useRoute()
const name = ref('')
const countryName = ref('')
onMounted(async ()=>{
  name.value = route.query.name
  if(name.value==='lp'){
    cardData.value = lpCardData
    bottomImg.value = (await import('../../assets/image/lianpingxian.jfif')).default
    countryName.value = '连平县'
  }
  else if(name.value==='lh'){
    cardData.value = lhCardData
    bottomImg.value = (await import('../../assets/image/xianyuold.png')).default
    countryName.value = '陆河县'
  }
})
onMounted(()=>{
  import('../../assets/image/sztuinfo.png').then((res)=>{
    scardData[0].image = res.default
  })
  import('../../assets/image/sztubuild.png').then((res) => {
    scardData[1].image = res.default
  })
  import('../../assets/image/sztuflower.png').then((res) => {
    scardData[2].image = res.default
  })
})
const lpCardData = [
  { id:1,name:'基本概况' ,content:`连平县是广东省河源市下辖的一个县，总面积为2275.08平方千米，位于广东省北部、新丰江上游。县政府驻地为元善镇。根据第七次人口普查数据，
  连平县常住人口为28.52万人。连平县下辖13个镇。`},
  { id:2, name: '历史沿革', content:`连平县的历史可以追溯到明崇祯七年（1634年），当时始建连平州。清代时期，连平改建制为属州，无属县。
  1911年，改州为县。1958年，与和平县合并为九连县，而后在1962年，和平县和连平县再次分立。1988年1月，连平县划归河源市管辖。`},
  { id:3 ,name: '发展与荣誉', content:`连平县被认定为国家级生态示范区、中国宜居宜业典范县、全国环境综合整治先进县、全国法治县创建先进单位、全国文明县城、中国鹰嘴蜜桃之乡。
  此外，它还是广东省直管县财政改革试点、广东省卫生城镇、原中央苏区县。连平县的交通便利，大广高速公路、粤赣高速公路、粤湘高速公路、汕昆高速公路穿境而过。`},
  { id:4,name: '发展与荣誉', content:`至2006年末，连平县的铁矿储量居全省第一，钨锡矿储量居华南地区首位。
  连平县被选为“中国最具投资潜力特色魅力示范县200强”，是客家文化的发源地之一。2023年，连平县地区生产总值达到106.2亿元，同比增长4.6%。`}
]
const lhCardData = [
  { id: 1, name: '基本概况', content: `陆河县位于广东省汕尾市东部沿海与兴梅山区结合部，1988年经国务院批准设立。县域总面积986平方公里，下辖8个镇和1个国营林场，总人口约35.44万，是客家文化的重要承载地` },
  { id: 2, name: '历史沿革', content: `陆河县原属陆丰县，因地处潮汕方言区中独特的客家风情，1988年析出北部山区8个乡镇设立陆河县，成为海陆丰革命根据地的重要组成部分。` },
  { id: 3, name: '发展与荣誉', content: `陆河县以“中国青梅之乡”闻名，青梅种植面积达12.3万亩，年产量2.5万吨。也是“中国建筑装饰之乡”，有22家“全国建筑装饰百强企业”由陆河外出人士创办。被评为“中国营商环境百佳示范县”、“四好农村路”全国示范县、“全国村庄清洁行动先进县”、“中国生态养生之乡”。` },
  { id: 4, name: '发展与荣誉', content: `森林覆盖率达73.04%，拥有全国最大的红锥林自然保护区。陆河青梅、木瓜被列为国家地理标志产品，城乡环境优雅，城市功能全面提升，群众获得感幸福感明显增强` }
]
const cardData = ref([])
const bottomImg=ref('')
const scardData=[
  { id: 1, name: '基本概况', content:`深圳技术大学是深圳市委市政府高标准、高规格建设的一所公办普通本科高校，于2018年11月30日经教育部批准正式设立。学校的创办背景紧密联系着国家产业结构的转型升级以及深圳抢抓“双区”建设的重大战略机遇，旨在满足高端制造业发展需求。
  深圳技术大学以成为国际化、高水平、示范性研究型技术大学为目标，倡导“唯实求精”的校训，致力于为国家培养具有较强创新实践能力的高级人才，立志成为一流研究型技术大学的拓荒牛和新标杆。`
    , image: '../../assets/image/sztuinfo.png'
  },
  { id: 2, name: '学科专业设置与人才培养', content:`依托《中国制造2025》与粤港澳大湾区的产业发展需求，深圳技术大学“嵌入式”对接世界一流应用型大学学科专业体系及深圳“20+8”产业集群，特别在数字化网络设备、新型显示、集成电路、新能源汽车、生命健康等领域设立和培育了优势学科和特色专业。
  自2019年首次独立招生以来，学校的招生形势持续火爆，每年新生规模约4000名，面向全国20多个省份招生，且招生线均在一本线或高优保护线以上，目前在校生规模已逾12000人，包括本科生、硕士生和博士生，着力培养既掌握理论知识又具备强实践能力的高级人才。`
    , image: '../../assets/image/sztubuild.png'
  },
  {
    id: 3, name: '地理位置与产业合作', content:`深圳技术大学位于深圳东部的坪山区，交通便捷，南坪快速路、外环高速、地铁14号线、16号线均可快速通达市区，其中16号线设有“技术大学站”。校园周边环境优美，与河流、湿地、山峦融为一体，提供了良好的学术研究氛围。学校与深圳市国家高新区坪山园区相邻，为创新创业提供了广阔的空间和显著的成本优势。
    坪山区作为全市增长潜力最大、发展势头最强的区域之一，以智能车、创新药、中国芯为代表的三大主导产业迅猛发展，汇聚了比亚迪、中芯国际、赛诺菲巴斯德等一批具有国际竞争力的龙头企业，为学校与产业界的深度合作提供了坚实基础。`
    , image: '../../assets/image/sztuflower.png'
  }
]
const bar = ref(null)
onMounted(()=>{
  var cards = document.querySelectorAll('.mid-card-content')
  // var bar = document.querySelector('.bar')
  var barActive = bar.value.querySelector('.bar-active')
  watch(()=> props.nowPage, (newVal) => {
    if (newVal === 1) {
      bar.value.style.transform = `translateX(0)`
      bar.value.style.transition = `0.7s`
      barActive.style.transform = `translateX(0)`;
      console.log('enter')
      cards.forEach((item) => {
        item.style.animationPlayState = `running`
      })
    }
    else if(newVal===2){
      bar.value.style.transform = `translateX(100vw)`
      bar.value.style.transition = `0.7s`
      barActive.style.transform = `translateX(100%)`;
      barActive.style.transition = `1s ease`;
    }
  })
})
const emit = defineEmits(['changePage'])
const editPage = (page)=>{
  emit('changePage', page)
}
const router= useRouter()
const back = ()=>{
  router.push('/pre')
}
</script>
<template>
  <div style="display: flex;position: relative;">
    <div class="box">
      <div class="top">
        <span class="subscript">县域所需</span>
        <h1 class="title">{{countryName }}基本情况</h1>
        <el-icon color="#78D2DE" class="stroke-vector">
          <StrokeVectorIcon />
        </el-icon>
      </div>
      <div class="mid">
        <div class="mid-card" v-for="item in cardData" :key="item.id">
          <h2 class="subtitle">{{ item.name }}</h2>
          <p class="mid-card-content">
            {{ item.content }}
          </p>
        </div>
      </div>
      <div class="bottom">
        <img class="bottom-img" :src="bottomImg" alt="县域所需">
      </div>
    </div>
    <div class="box">
      <div class="top">
        <span class="subscript" style="color: #147AD6;">高校所能</span>
        <h1 class="title">深圳技术大学</h1>
        <div class="line"></div>
      </div>
      <div class="smid">
        <div class="smid-card" v-for="item in scardData" :key="item.id">
          <div class="smid-img">
            <img :src="item.image" :alt="item.name">
          </div>
          <span class="subtitle" style="color: #147AD6;">{{ item.name }}</span>
          <p class="smid-content">
            {{ item.content }}
          </p>
        </div>
      </div>
      <div class="sbottom">
      </div>
      <div class="sztu"></div>
    </div>
    <div class="bar" ref="bar">
      <div class="bar-active"></div>
      <span class="bar-item" @click="editPage(1)">县城所需</span>
      <span class="bar-item" @click="editPage(2)">高校所能</span>
      <span class="bar-item" @click="back">返回首页</span>
    </div>
  </div>
</template>


<style lang="scss" scoped>
//引入pre2Page的样式
@import "pre2Page.scss";
</style>